<template>
  <el-container class="home-container">
    <!--头部区域-->
    <el-header>港口堆库存管理系统
      <div>
        <img
          src="../assets/logo.png"
          alt=""
        >
        <span>港口堆库存管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <!--页面主体区域-->
    <el-container>
      <!--侧边栏-->
      <el-aside width="200px">
        <!--侧边栏菜单区域-->
        <el-menu
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
        >
          <!--一级菜单-->
          <el-submenu index="1">
            <!--一级菜单模板区-->
            <template slot="title">
              <!--图标-->
              <i class="el-icon-location"></i>
              <!--文本-->
              <span>
								<el-button @click="$router.replace('/goods_company_manger')">货代公司管理</el-button>
							</span>
            </template>
          </el-submenu>

          <el-submenu index="1">
            <!--一级菜单模板区-->
            <template slot="title">
              <!--图标-->
              <i class="el-icon-location"></i>
              <!--文本-->
              <span>
								<el-button @click="$router.replace('/car_manger')">货车管理</el-button>
							</span>
            </template>
          </el-submenu>

          <el-submenu index="1">
            <!--一级菜单模板区-->
            <template slot="title">
              <!--图标-->
              <i class="el-icon-location"></i>
              <!--文本-->
              <span>
								<el-button @click="$router.replace('/goods_manger')">货物管理</el-button>
							</span>
            </template>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!--右侧内容主题-->
      <el-main>
        <!--路由占位符-->
        <router-view>

        </router-view>
      </el-main>

    </el-container>
  </el-container>

</template>

<script>
export default {
  data(){
    return{
      msg:""
    };
  },


  methods: {
    logout(){
      window.sessionStorage.clear()
      this.$router.push('/')
    },
  }
}
</script>

<!--类选择器-->
<style scoped>
.el-header {
  background-color: rgb(34, 136, 136);
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
}
.el-aside {
  background-color: rgb(33, 156, 156);
}
.el-main {
  background-color: rgb(217, 235, 235);
}
.home-container {
  height: 100%;
}
</style>


